<template>
    <div id="login">
        <p>手机号:<input  type="text" v-model="valueTel" placeholder="请输入手机号"/></p>
        <p>验证码:<input  type="text" v-model="verify" 
         :disabled='disabledVerify' placeholder="请输入验证码"/> </p>
        <p><input type="submit" class="btn" @click="submit" value="登录" :disabled='disabled'></p>
        <mycode></mycode>
    </div>
</template>

<script>
import mycode from '@/components/mycode'
export default {
    name: 'login',
    data() {
        return {
            valueTel:'',
            verify:'',
            // 没有发送验证禁止填写
            disabledVerify:true,
            // 提交按钮
            disabled:true
        };
    },
    created() {

    },
    methods: {
        // 登录
        submit() {
            if(/^\d{6}$/.test(this.verify)){
                this.$loading.show('登录成功')
                this.$router.push('/About')
                setTimeout(() => {
                    this.$loading.hide()
                },1000)


            } else {
                this.$loading.show('验证码不正确')
                setTimeout(() => {
                    this.$loading.hide()
                },1000)
            }

            

        }
    },
    watch:{
        // 监听输入框变化
        valueTel(newValue) {
            this.$store.commit('changeValue',newValue)
             if(this.valueTel != '' && this.verify != ''){
                this.disabled = false
            }
        },
        verify() {
            if(this.valueTel != '' && this.verify != ''){
                this.disabled = false
            }
        },
        getStore() {
           this.disabledVerify = false
           
        }

    },
    //组件挂载
    components: {
        mycode
    },
    //计算属性
    computed: {
        getStore() {
            return this.$store.state.disabledVerify
        }
    },
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#login{
    // text-align: center;
    padding-left: 50px;
    box-sizing: border-box;
    margin-top: 200px;
    p{
        // width: 400px;
        height: 30px;
    }
    :nth-child(3){
        margin-left: 100px;
       
    }
}
</style>
